<ngs-panel [option]="panelOption">
    
    <div class="perm-root">
        <!-- 一级菜单 -->
        <div class="perm-root-card">
            <div class="perm-card-header" (click)="addPerm(1)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                添加一级分类
            </div>
            <div class="perm-card-content">
                <nz-empty nzNotFoundImage="simple" *ngIf="!oneData"></nz-empty>
                
                <div *ngFor="let item of oneData;let i = index" class="perm-card-mess" [style]="item.style" (click)="clickOne(item,i)">
                    <div>{{item.name}} -- [{{item.isSop?'运营平台':'商户'}}] -- {{item.sort}}</div>
                    <div class="perm-edit">

                        <i nz-icon nzType="delete" nzTheme="outline" (click)="del(item)"></i>
                        <i nz-icon nzType="edit" nzTheme="outline" style="margin-left:4px" (click)="edit(item)"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 二级菜单 -->
        <div class="perm-root-card">
            <div class="perm-card-header" (click)="addPerm(2)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                添加二级分类
            </div>
            <div class="perm-card-content">
                <nz-empty nzNotFoundImage="simple" *ngIf="!twoData"></nz-empty>
                <div *ngFor="let item of twoData;let i = index" class="perm-card-mess" [style]="item.style" (click)="clickTwo(item,i)">
                    <div>{{item.name}}</div>
                    <div class="perm-edit">
                        <i nz-icon nzType="delete" nzTheme="outline" (click)="del(item)"></i>
                        <i nz-icon nzType="edit" nzTheme="outline" style="margin-left:4px" (click)="edit(item)"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 三级菜单 -->
        <div class="perm-root-card" (click)="addPerm(3)">
            <div class="perm-card-header">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                添加三级分类
            </div>
            <div class="perm-card-content">
                <div *ngFor="let item of threeData;let i = index" class="perm-card-mess" [style]="item.style" (click)="clickOne(item,i)">
                    <div>{{item.name}}</div>
                    <div class="perm-edit">
                        <i nz-icon nzType="delete" nzTheme="outline"></i>
                        <i nz-icon nzType="edit" nzTheme="outline" style="margin-left:4px"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ngs-panel>


<nz-modal [(nzVisible)]="permData.isVisible" nzTitle="添加权限" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    <ng-container *nzModalContent>
        <ngs-form [option]="permFormOption" #permForm></ngs-form>
    </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="permTwoData.isVisible" nzTitle="添加权限" (nzOnCancel)="handleTwoCancel()" (nzOnOk)="handleTwoOk()">
    <ng-container *nzModalContent>
        <ngs-form [option]="permTwoFormOption" #permTwoForm></ngs-form>
    </ng-container>
</nz-modal>